<template>
  <van-swipe-cell class="sub-form-item-cell">
    <form-card class="sub-form-item-card" @click="edit">
      <FormCardIndexTitle :index="rowIndex"/>
      <renderFields />
    </form-card>
    <template #right>
      <van-button @click="() => emits('copy', formModel)" style="height: 100%" square text="复制" type="primary" class="delete-button" />
      <van-button @click="() => emits('remove')" style="height: 100%" square text="删除" type="danger" class="delete-button" />
    </template>
  </van-swipe-cell>
</template>
<script setup>
import {createProps} from '@/utils';
import FormCard from '@comp/FormEngine/field/Card/FormCard.vue';
import FormCardIndexTitle from '@comp/FormEngine/field/SubTable/FormCardIndexTitle.vue';
import FormComponentDelegate from '@comp/FormEngine/FormComponentDelegate.vue';
import {h} from 'vue';

defineOptions({name: 'SubTableItemCard'});
const emits = defineEmits(['edit', 'remove', 'copy']);
const props = defineProps({
  rowIndex: createProps(Number),
  context: createProps(Object),
  formModel: createProps(Object),
  subForm: createProps(Object, () => undefined),
  config: createProps(Object, () => undefined),
});

function renderFields() {
  if (!props?.config?.content) return [];
  return props?.config?.content.map(item => h(FormComponentDelegate, {
    config: item,
    context: props.context,
    formModel: props.formModel,
    rowIndex: props.rowIndex,
    forceDetail: true,
    subFormId: props.subForm.id
  }))
}

function edit() {
  emits('edit', {
    formModel: props.formModel,
    rowIndex: props.rowIndex,
  });
}
</script>
<style scoped lang="less">
.sub-form-item-cell {
  position: relative;
  margin: 10px 0;
  user-select: none;
}

.sub-form-item-card:active {
  border:  1px solid var(--van-primary-color);
}

.sub-form-item-card {
  padding: 20px 20px;
  margin: 0 10px;
  position: relative;
}
</style>